<template>
	<div>
		<div class="top">
			<div class="userinfo">
				<img :src="userinfo.avatarUrl">
			</div>
		
			<div class="name">
				<label>{{userinfo.nickName}}</label>
				<p class="notice">{{quote}}</p>
			</div>
		</div>

		<div class="box">
			<div class="row" @click="showInstruction">
				<label class="left">
					<img class="img" src="/static/images/homework.png">
				</label>
				<label class="name">&nbsp;&nbsp;操作指引</label>
				<label class="right">
					>
				</label>
			</div>
			<div class="row">
				<label class="left">
					<img class="img" src="/static/images/homework.png">
				</label>
				<label class="name">&nbsp;&nbsp;mpvue小程序开发笔记</label>
				<label class="right">
					>
				</label>
			</div>
		</div>

		<div class="box">
				<div class="row" @click="deleteConfirm">
					<label class="left">
						<img class="img" src="/static/images/delete.png">
					</label>
					<label class="name">&nbsp;&nbsp;清空记录</label>
					<label class="right">
						>
					</label>
				</div>
				<div class="row" @click="showOpinion">
					<label class="left">
						<img class="img" src="/static/images/approval.png">
					</label>
					<label class="name">&nbsp;&nbsp;意见反馈</label>
					<label class="right">
						>
					</label>
				</div>
		</div>
	</div>
</template>

<script>
import { post, showModal, showSuccess } from '@/util'

export default {
  data () {
    return {
      userinfo: {},
      quote: ''
    }
  },
  onShow () {
    const userinfo = wx.getStorageSync('userinfo')
    if (userinfo.openId) {
      this.userinfo = userinfo
      this.rankArray()
    }
  },
  onShareAppMessage () {
    return {
      title: '为习惯赋分',
      path: '/pages/index/main',
      imageUrl: ''
    }
  },
  methods: {
    rankArray () {
      let a = Math.random() + ''
      var rank1 = a.charAt(5)
      var quotes = ['不奋发，则心日颓靡；不检束，则心日恣肆', '自制是一种秩序，一种对于快乐与欲望的控制', '哪怕一点小小的克制，也会使人变得强而有力', '做一个自律的人，像优秀的人学习，然后做好自己​', '真正的自由是在所有时候都能控制自己', '每天爱自己多一点！！！', '每天爱自己多一点！！！', '如果连自己都不能控制，有什么资格去谈自己想要的', '登峰造极的成就源于自律', '自我控制是最强者的本能', '立志言为本，修身行乃先']
	    this.quote = quotes[rank1]
    },
    showInstruction () {
      wx.navigateTo({
    		url: '/pages/instruction/main'
  		})
    },
    showOpinion () {
      wx.navigateTo({
    		url: '/pages/opinion/main'
  		})
    },
    async deleteRecords () {
      try {
        const res = await post('/weapp/deleterecords', {openid: this.userinfo.openId})
        console.log('从后端返回的执行正确的信息是：', res)
        showSuccess('记录已清空')
      } catch (err) {
        showModal('清空失败', '请重试')
        console.log('从后端返回的执行错误的信息是：', err)
      }
    },
    deleteConfirm () {
      wx.showModal({
        content: `清空后无法恢复，确定要清空？`,
        success: res => {
          this.deleteRecords()
        }
      })
    }
  }

}
</script>

<style lang="scss" scoped>
.top {
	width: 100%;
	height: 80px;
	background: #A6A6D2;
	padding-top: 30px;
	display: block;

	.userinfo {
		// padding-bottom: 5px;
		float: left;
		img {
			width: 120rpx;
			height: 120rpx;
			margin: 10rpx;
			border-radius: 50%;
      border: 1px #D0D0D0 solid;
		}
	}

	.name {
		padding-top: 30px;
		padding-left: 5px;
		color: #FFF;
		font-size: 16px;
    float: left;
		.notice{      
			font-size: 12px;
		}
	}
}


.box{
  // margin-top: 10px;
  background:#FFFFFF;
  font-size:15px;
  .row{
    padding: 0px 18px;
    border-bottom: 1px #E8E8E8 solid;
    height: 55px;
    line-height: 55px;
    .img {
      float:left;
      width: 20px;
      height: 20px;
      padding-top:16px;
    }
    .name {
      float:left;
    }
  }
  .right {
    float: right;
    color: #C8C8C8;
    line-height:55px;
  }
  // .left {
  //   width:80%;
  // }
}  



</style>